<template>
  <div>
    <div class="layout-breadcrumb">
      <span class="button-text breadcrumb-item" @click="toList">全部项目</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item">{{data.name}}</span>
      <i class="el-icon-arrow-down" style="cursor:pointer" @click="detailVisible = !detailVisible"></i>
    </div>
    <!-- 详细 -->
    <transition name="el-zoom-in-top">
      <m-projectDetail v-show="detailVisible"></m-projectDetail>
    </transition>
    <div class="ui-tabs">
      <ul>
        <li class="ui-tabs__item" :class="{active:form.type==0}" @click="changeTabs(0)">
          <span>{{data.total}} 全部</span>
        </li>
        <li class="ui-tabs__item" :class="{active:form.type==1}" @click="changeTabs(1)">
          <span>{{data.new}} 未联系</span>
        </li>
        <li class="ui-tabs__item" :class="{active:form.type==2}" @click="changeTabs(2)">
          <span>{{data.areadyContact}} 已联系</span>
        </li>
        <li class="ui-tabs__item" :class="{active:form.type==3}" @click="changeTabs(3)">
          <span>{{data.pending}} 待处理</span>
        </li>
        <li class="ui-tabs__item" :class="{active:form.type==4}" @click="changeTabs(4)">
          <span>{{data.process}} 流程中</span>
        </li>
      </ul>
    </div>
    <!-- 表格数据 -->
    <m-dataTable :data.sync="data.list" ref="detailTable"></m-dataTable>
  </div>
</template>

<script>
import {Select, Option, Button} from 'element-ui'
import tableData from './components/detailTable'
import ProjectDetail from './components/projectDetail'
  export default {
    components: {
      [Select.name]: Select,
      [Option.name]: Option,
      [Button.name]: Button,
      'm-dataTable': tableData,
      'm-projectDetail': ProjectDetail
    },
    data () {
      return {
        data: {},
        props: ['id'],
        active: 0,
        detailVisible: false,
        form: {
          sort: '1',
          state: 0,
          type: 0,
        }
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      initWidth() {
        this.$refs.detailTable.initWidth()
      },
      loadData() {
        this.data = {
          name: '三文鱼项目',
          total: 167,
          new: 2,
          areadyContact: 43,
          areadyReply: 14,
          pending: 12,
          process: 10,
          list: []
        }
        for(var i = 0; i < 10; i++) {
          this.data.list.push({
            id: i+1,
            isCollection: false,
            head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg',
            name: '林公子',
            job: 'Baidu Inc.-研发工程师',
            address: '上海  浦东新区',
            status: '已联系',
            statusName: '已联系',
            startTime: '2个月前',
            tags: ['高级工程师', '一等奖', '资深研发工程师', '...'],
            dynamic: { //动态
              watch: 1,
              notice: 3
            }, 
            contactRecord: [
              {
                date: '1/10',
                name: '电话沟通过'
              },
              {
                date: '1/9',
                name: '电话未打通'
              },
              {
                date: '1/8',
                name: '电话未打通'
              },
              {
                date: '1/7',
                name: '电话未打通'
              },
            ],
            contact: { //联系TA
              wx: true,
              mobile: true,
              email: true,
            },
            managerHead: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg',
            managerName: 'hyybai'
          })
        }
      },
      changeTabs(tab) {
        if(this.form.type !== tab){
          this.form.type = tab;
          this.loadData();
        }
      },
      toList() {
        this.$emit('toList', true)
      },
    }
  }
</script>

<style>

 
</style>
